<template>

  <div style="display: flex; align-items: center; justify-content: center">

    <el-dropdown v-if="checkPermission(['exam:publish', 'exam:start', 'exam:pause', 'exam:finish'])" style="margin-right: 10px" @command="handleCommand">
      <span class="el-dropdown-link">
        <i class="el-icon-setting el-icon--left"/>状态<i class="el-icon-arrow-down el-icon--right"/>
      </span>
      <el-dropdown-menu>
        <el-dropdown-item v-permission="['exam:publish']" :disabled="state!==0" command="publish">发布考试</el-dropdown-item>
        <el-dropdown-item v-permission="['exam:start']" :disabled="state!==1 && state!==3" command="start">开始考试</el-dropdown-item>
        <el-dropdown-item v-permission="['exam:pause']" :disabled="state!==2" command="pause">暂停考试</el-dropdown-item>
        <el-dropdown-item v-permission="['exam:finish']" :disabled="state!==2 && state!==3" command="stop">结束考试</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <i class="el-icon-setting el-icon--left"/>更多功能<i class="el-icon-arrow-down el-icon--right"/>
      </span>
      <el-dropdown-menu>
        <el-dropdown-item v-permission="['exam:detail:detail']" command="stat">统计概览</el-dropdown-item>
        <el-dropdown-item v-permission="['exam:detail:record:list']" command="record">考试记录</el-dropdown-item>
        <el-dropdown-item command="review">阅卷情况</el-dropdown-item>
        <el-dropdown-item v-permission="['exam:detail:record:qu:list']" command="qu">错题汇总</el-dropdown-item>
        <el-dropdown-item command="notify">考生通知</el-dropdown-item>
        <el-dropdown-item v-permission="['exam:add','exam:update']" command="copy">复制考试</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>


  </div>

</template>

<script>
import permission from '@/directive/permission/index.js'
import { updateState, copy } from '@/api/exam/exam'
import checkPermission from '@/utils/permission'

export default {
  name: 'ExamInlineMenu',
  directives: { permission },
  props: {
    value: {
      type: String,
      default: ''
    },
    state: Number
  },

  methods: {
    checkPermission,

    handleCommand(command) {
      if (command === 'record') {
        this.toRecord()
      }
      if (command === 'qu') {
        this.toQu()
      }
      if (command === 'notify') {
        this.showNotify()
      }

      if (command === 'publish') {
        this.publish()
      }
      if (command === 'pause') {
        this.pause()
      }
      if (command === 'start') {
        this.publish()
      }
      if (command === 'stop') {
        this.stop()
      }
      if (command === 'kept') {
        this.kept()
      }
      if (command === 'review') {
        this.toReview()
      }
      if (command === 'stat') {
        this.toStat()
      }
      if (command === 'copy') {
        this.handleCopy()
      }
    },
    toReview() {
      const routeData = this.$router.resolve({ name: 'ReviewPaperList', query: { examId: this.value }})
      window.open(routeData.href, '_blank')
    },
    toRecord() {
      this.$router.push({ name: 'ExamRecordList', query: { examId: this.value }})
    },
    toQu() {
      this.$router.push({ name: 'ExamRecordQu', query: { examId: this.value }})
    },
    toStat() {
      this.$router.push({ name: 'ExamDetail', params: { examId: this.value }})
    },
    showNotify() {
      this.$emit('share', this.value)
    },
    publish() {
      updateState(this.value, 2).then(() => {
        this.$message.success('考试发布成功！')
        this.$emit('refresh')
      })
    },
    pause() {
      updateState(this.value, 3).then(() => {
        this.$message.success('考试已暂停！')
        this.$emit('refresh')
      })
    },
    stop() {
      this.$emit('finish', this.value)
    },
    kept() {
      updateState(this.value, 7).then(() => {
        this.$message.success('考试已存档！')
        this.$emit('refresh')
      })
    },
    handleCopy() {
      copy(this.value).then(res => {
        this.$message.success('复制成功！')
        this.$router.push({ name: 'ExamUpdate', params: { id: res.data.id }})
      })
    }
  }
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #1890ff;
  font-weight: 500;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
